const {
  signIn
} = require("../../utils/util");

// pages/demo_01/demo_01.
var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    punchCount: 2,
    hidden: true,
    prurl: '',
    avatarUrl: "",
    datalist: [],
    nickname: ""
    /*canvasWidth:0,
    canvasHeight:0*/
  },

  /**
   * 生命周期函数--监听页面加载
   */
  getData() {

    let that = this
    wx.cloud.database().collection('dongtai').get({
      success(res) {
        console.log("ok", res.data)
        that.setData({
          datalist: res.data

        })
        console.log(res.data)
      }
    })

  },

  onLoad: function (options) {
    var name;
    this.getData();
    this.setData({
      avatarUrl: app.globalData.userInfo.avatarUrl,
      nickname: app.globalData.userInfo.name,
      userid: app.globalData.userId
    })
    var that = this;

    let promise1 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: app.globalData.userInfo.avatarUrl,
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    let promise2 = new Promise(function (resolve, reject) {
      name = app.globalData.userInfo.name;
      wx.getImageInfo({
        src: '../../images/pkhkwgfsy.jpeg',
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });

    Promise.all([
      promise1, promise2
    ]).then(res => {
      const ctx = wx.createCanvasContext('shareImg')
      ctx.drawImage('../../' + res[1].path, 0, 0, 545, 771)
      ctx.setFontSize(30)
      ctx.setTextAlign('center')
      ctx.setFillStyle('#000000')
      ctx.fillText(name, 545 / 2, 330)
      ctx.fillText('我今天也在坚持打卡', 545 / 2, 380)
      ctx.fillText('快来“flag together”', 545 / 2, 440)
      ctx.fillText('和我一起插旗吧！', 545 / 2, 490)
      ctx.drawImage('../../images/122765807157161967.png', 167.5, 500, 210, 210)

      /* 绘制图像到画布  图片的位置你自己计算好就行 参数的含义看文档 */
      /* ps: 网络图片的话 就不用加../../路径了 反正我这里路径得加 */
      var avatarurl_width = 190; //绘制的头像宽度
      var avatarurl_heigth = 190; //绘制的头像高度
      var avatarurl_x = 184; //绘制的头像在画布上的位置
      var avatarurl_y = 80; //绘制的头像在画布上的位置
      ctx.save();
      ctx.beginPath(); //开始绘制
      //先画个圆 前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针
      ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
      ctx.closePath()
      ctx.clip(); //画好了圆 剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
      ctx.drawImage(res[0].path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片
      /* 绘制 */
      ctx.stroke()
      ctx.draw()

    })
  },
  share: function () {
    var that = this
    wx.showLoading({
      title: '努力生成中...'
    })
    wx.canvasToTempFilePath({
      x: 0,
      u: 0,
      width: 545,
      height: 771,
      destWidth: 545,
      destHeight: 771,
      canvasId: 'shareImg',
      success: function (res) {
        console.log(res.tempFilePath);
        that.setData({
          prurl: res.tempFilePath,
          hidden: false
        })
        wx.hideLoading()
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },


  /**
   * 保存到相册
   */
  save: function () {
    var that = this
    //生产环境时 记得这里要加入获取相册授权的代码
    wx.saveImageToPhotosAlbum({
      filePath: that.data.prurl,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              that.setData({
                hidden: true
              })
            }
          }
        })
      }
    })
  },

  initPunchData(id) {

    var data = wx.getStorageSync('signin' + id);
    // 已打卡天数
    var punchCount = data.punchCount ? data.punchCount : 2;
    this.setData({
      punchCount: punchCount,

    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})